<template>
  <div class="examinationOpinion" v-loading="pageLoading">
    <el-tabs class="resultIdea" v-model="activeName">
      <el-tab-pane label="基本信息" name="first" style="padding: 20px;">
        <el-row style="margin-bottom: 40px;">
          <el-col :span="24" class="x-title">建设规模</el-col>
          <el-col :span="24" class="x-other">
            <ul>
              <li>
                施工单位：
                <span>{{echoList.implmentationEnterprisePickInfo.companyInfo.name}}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="24" class="x-other">
            <ul>
              <li>
                项目负责人：
                <span>{{echoList.projectLeaderInfo.name}}</span>
              </li>
              <li>
                技术负责人：
                <span>{{echoList.technicalLeaderInfo.name}}</span>
              </li>
              <li>
                技术交底时间：
                <span>{{echoList.technicalDisclosureTime}}</span>
              </li>
              <li>
                施工员：
                <span>{{echoList.builderInfo.name}}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="24" class="x-other">
            <ul>
              <li>
                安全员：
                <span>{{echoList.safetyOfficerInfo.name}}</span>
              </li>
              <li>
                材料员：
                <span>{{echoList.materialmanInfo.name}}</span>
              </li>
              <li>
                预算员：
                <span>{{echoList.budgeterInfo.name}}</span>
              </li>
              <li>
                质检员：
                <span>{{echoList.qualityInspectorInfo.name}}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="24" class="x-total">
            <span>参加人员：</span>
            <span>{{echoList.participants}}</span>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 40px;">
          <el-col :span="24" class="x-title">监理单位信息</el-col>
          <el-col :span="24" class="x-other">
            <ul>
              <li>
                监理单位：
                <span>{{echoList.supervisionEnterprisePickInfo.companyInfo.name}}</span>
              </li>
              <li>
                总监：
                <span>{{echoList.directorInfo.name}}</span>
              </li>
              <li>
                现场监理员：
                <span>{{echoList.fieldSupervisorInfo.name}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 40px;">
          <el-col :span="24" class="x-title">附件资料</el-col>
          <el-col :span="24" class="x-other">
            <el-form :inline="true" label-position="right" label-width="180px">
              <div>
                <el-form-item label="技术交底会纪要" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[0]"
                    @openPdf="seePdf"
                    :file-obj="fileList[0]"
                    :file-num="0"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="监理批准的施工组织设计" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[1]"
                    @openPdf="seePdf"
                    :file-obj="fileList[1]"
                    :file-num="1"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="第一次工地例会会议纪要" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[2]"
                    @openPdf="seePdf"
                    :file-obj="fileList[2]"
                    :file-num="2"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="开工令" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[3]"
                    @openPdf="seePdf"
                    :file-obj="fileList[3]"
                    :file-num="3"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="第一次变更会审意见" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[4]"
                    @openPdf="seePdf"
                    :file-obj="fileList[4]"
                    :file-num="4"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="施工合同" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[5]"
                    @openPdf="seePdf"
                    :file-obj="fileList[5]"
                    :file-num="5"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="监理合同" label-width="180px">
                  <seeFujianForList
                    v-if="fileList[6]"
                    @openPdf="seePdf"
                    :file-obj="fileList[6]"
                    :file-num="6"
                  />
                </el-form-item>
              </div>
            </el-form>
            <!-- <ul>
              <li>
                技术交底会纪要：
                <span>{{echoList.technicalSummaryFileInfo.fileName}}</span>
              </li>
              <li>
                监理批准的施工组织设计：
                <span>{{echoList.designFileInfo.fileName}}</span>
              </li>
              <li>
                第一次工地例会会议纪要：
                <span>{{echoList.firstSiteMeetingSummaryFileInfo.fileName}}</span>
              </li>
            </ul>-->
          </el-col>
          <!-- <el-col :span="24" class="x-other" style="margin-bottom: 20px;">
            <el-form :inline="true" label-position="right" label-width="100px">
              <el-form-item label="开工令" label-width="75px">
                <el-upload
                  class="upload-demo"
                  action="/pc/file/upload"
                  :limit="1"
                  :before-upload="uploadBefore"
                  disabled
                >
                  <el-button @click="seePdf(3)" size="small">查看</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="第一次变更会审意见" label-width="155px">
                <el-upload
                  class="upload-demo"
                  action="/pc/file/upload"
                  :limit="1"
                  :before-upload="uploadBefore"
                  disabled
                >
                  <el-button @click="seePdf(4)" size="small">查看</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="施工合同" label-width="85px">
                <el-upload
                  class="upload-demo"
                  action="/pc/file/upload"
                  :limit="1"
                  :before-upload="uploadBefore"
                  disabled
                >
                  <el-button @click="seePdf(5)" size="small">查看</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="监理合同" label-width="85px">
                <el-upload
                  class="upload-demo"
                  action="/pc/file/upload"
                  :limit="1"
                  :before-upload="uploadBefore"
                  disabled
                >
                  <el-button @click="seePdf(6)" size="small">查看</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-col>-->
        </el-row>

        <el-row style="margin-bottom: 60px;">
          <el-col :span="24" class="x-title">区县意见</el-col>
          <el-row>
            <el-col :span="24" class="x-subtitle">区县中心审查意见</el-col>
            <el-col :span="24" class="x-textarea">
              <el-form :model="formData" ref="formData" :rules="formDataRules">
                <el-form-item prop="opinion">
                  <el-input
                    type="textarea"
                    :rows="8"
                    :readonly="disabled"
                    style="width:70%"
                    v-model="formData.opinion"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="24">
              <el-form label-width="90px" :inline="true">
                <el-form-item label="审查人">
                  <!-- <el-input style="width:160px" size="small" v-model="formData.signature"></el-input> -->
                  <img
                    style="width: 100px;"
                    :src="`${baseUrl}${formData.signature || signature}`"
                    alt
                  />
                </el-form-item>
                <el-form-item label="审查日期">
                  <el-date-picker
                    :readonly="disabled"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="formData.createTime"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="审查意见">
                  <el-select
                    :disabled="disabled"
                    size="small"
                    style="width:160px"
                    v-model="status_1"
                  >
                    <el-option :value="0" label="同意"></el-option>
                    <el-option :value="1" label="不同意"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-row>
        <div class="btn">
          <el-button v-if="!disabled" type="primary" @click="onSubmit">提交</el-button>
          <el-button v-if="!disabled" @click="back">取消</el-button>
          <el-button v-if="disabled" @click="back">返回</el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="second">
        <div class="processContainer">
          <process :processData="processData"></process>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import process from "../public/process";
import config from "@/config/index.js";
import { getSignature } from "@/api/feasibilityStudy/countyReviewOpinions.js";
import {
  getInformation,
  getEnterpriseDetail,
  addReviewOpinion, //添加审查意见
  searchReviewOpinion, //查询审查意见
  searchReviewList //查询审查流程列表
} from "@/api/project1/projectOrganization/examinationOpinion";

import { validateNotNull } from "@/utils/validate.js";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    process,
    seeFujianForList
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      activeName: "first", //Tab首选
      processData: [], //流程列表
      echoList: {
        //回显数据
        implmentationEnterprisePickInfo: {
          contractFileInfo: {},
          companyInfo: {}
        },
        supervisionEnterprisePickInfo: {
          contractFileInfo: {},
          companyInfo: {}
        },
        technicalSummaryFileInfo: {},
        designFileInfo: {},
        firstSiteMeetingSummaryFileInfo: {},
        startTokenFileInfo: {},
        firstChangeOpinionsFileInfo: {},
        projectLeaderInfo: {},
        technicalLeaderInfo: {},
        builderInfo: {},
        safetyOfficerInfo: {},
        materialmanInfo: {},
        budgeterInfo: {},
        qualityInspectorInfo: {},
        directorInfo: {},
        fieldSupervisorInfo: {}
      },
      formData: {
        //提交数据
        projectId: localStorage.getItem("projectId"),
        groupId: 12,
        type: 0,
        createTime: null,
        opinion: null,
        signature: null,
        status: null
      },
      formDataRules: {
        opinion: [{ validator: validateNotNull, trigger: "blur" }]
      },
      status_1: 0, //同意与不同意状态
      InquireOpinion: {
        //查询审查意见
        projectId: localStorage.getItem("projectId"),
        groupId: 12,
        type: 0
      },
      projectId: localStorage.getItem("projectId"),
      disabled: true,
      baseUrl: config.baseUrlImg,
      signature: "",
      nowTime: "",
      pageLoading: false,
      fileList: []
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    this.getSignature();
    this.getTime();
  },
  methods: {
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    //文件提交前
    uploadBefore: function(file) {
      var isTpye = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (isTpye != "pdf") {
        this.$message({
          showClose: true,
          message: "上传文件只能是pdf格式!",
          type: "error"
        });
        return false;
      }
    },
    getTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var trueTime = year + "-" + month + "-" + day;

      this.formData.createTime = trueTime;
      this.getDetail();
    },
    getSignature() {
      //获取用户签名
      getSignature().then(res => {
        this.signature = res.data;
      });
    },
    //获取数据
    getDetail() {
      this.pageLoading = true;
      //回显获取数据
      getInformation({ projectId: this.projectId }).then(res => {
        this.pageLoading = false;
        if (res.data) {
          this.echoList = res.data;
          var array = [];
          array.push([
            {
              name: res.data.technicalSummaryFileInfo.fileName,
              url: res.data.technicalSummaryFileInfo.filePath
            }
          ]);
          array.push([
            {
              name: res.data.designFileInfo.fileName,
              url: res.data.designFileInfo.filePath
            }
          ]);
          array.push([
            {
              name: res.data.firstSiteMeetingSummaryFileInfo.fileName,
              url: res.data.firstSiteMeetingSummaryFileInfo.filePath
            }
          ]);
          array.push([
            {
              name: res.data.startTokenFileInfo.fileName,
              url: res.data.startTokenFileInfo.filePath
            }
          ]);
          array.push([
            {
              name: res.data.firstChangeOpinionsFileInfo.fileName,
              url: res.data.firstChangeOpinionsFileInfo.filePath
            }
          ]);
          array.push([
            {
              name:
                res.data.implmentationEnterprisePickInfo.contractFileInfo
                  .fileName,
              url:
                res.data.implmentationEnterprisePickInfo.contractFileInfo
                  .filePath
            }
          ]);
          array.push([
            {
              name:
                res.data.supervisionEnterprisePickInfo.contractFileInfo
                  .fileName,
              url:
                res.data.supervisionEnterprisePickInfo.contractFileInfo.filePath
            }
          ]);
          this.fileList = array;
          console.log(this.fileList[0], "文件列表");
        }
      });
      //查询审查意见
      searchReviewOpinion(this.InquireOpinion).then(res => {
        if (res.data) {
          this.formData = res.data;
          this.formData.createTime = res.data.createTime.slice(0, 10);
          this.status_1 = String(res.data.status);
        }
      });
      //查询审查流程列表
      searchReviewList({ projectId: this.projectId, groupId: 12 }).then(res => {
        if (res.code == 1000) {
          var temp = [];
          for (let i = 0; i < res.data.length; i++) {
            let processList = {}; //初始化
            var createTime = res.data[i].createTime.slice(0, 10);
            if (res.data[i]) {
              processList["isReview"] = true;
              processList["institutions"] = res.data[i].name;
              processList["groupId"] = res.data[i].groupId;
              processList["type"] = res.data[i].type;
              processList["date"] = createTime;
              processList["people"] = res.data[i].signature;
              processList["advice"] = res.data[i].opinion;
              processList["status"] = res.data[i].status;
            }
            temp.push(processList);
          }
          this.processData = temp;
        }
      });
    },
    //提交
    onSubmit() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.formData.status = parseInt(this.status_1);
          this.formData.createTime =
            this.formData.createTime + " " + "00:00:00";
          addReviewOpinion(this.formData)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$router.push(
                "/projectManagement/projectImplementation/dealwith"
              );
            })
            .catch(err => {
              loading.close();
            });
        }
      });
    },
    //返回列表
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  list-style: none;
}
.examinationOpinion {
  .x-title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: rgba(77, 77, 77, 1);
    margin-bottom: 30px;
  }
  .x-project {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 20px;
    ul {
      display: flex;
      li {
        margin-right: 30px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(166, 166, 166, 1);
      }
    }
  }
  .x-other {
    font-size: 14px;
    font-family: PingFang SC;
    line-height: 20px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 20px;
    ul {
      display: flex;
      li {
        margin-right: 60px;
        span {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: rgba(166, 166, 166, 1);
        }
      }
    }
  }
  .x-total {
    span:first-child {
      font-size: 14px;
      font-family: PingFang SC;
      line-height: 20px;
      color: rgba(51, 51, 51, 1);
    }
    span:last-child {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: rgba(51, 51, 51, 1);
    }
  }
  .x-subtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 10px;
  }
  .x-textarea {
    margin-bottom: 20px;
  }

  .resultIdea {
    /deep/ .el-tabs__content {
      overflow: unset;
      background: #fff;
      // padding:20px;
    }
    /deep/ .el-tabs__header {
      background: #fff;
      height: 46px;
      padding: 0 20px;

      /deep/ .el-tabs__item {
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        padding: 0 10px;
      }

      /deep/ .el-tabs__nav-wrap::after {
        width: 0;
      }
    }

    .earlyMappingForm {
      /deep/ .el-form-item__label {
        color: #8c8c8c;
        text-align: right;
      }
      /deep/ .el-input__suffix {
        i {
          font-style: normal;
        }
      }
      input {
        // width: 220px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
      }
    }

    .formAllRow {
      /deep/ .el-form-item__content .el-textarea .el-textarea__inner {
        width: 1170px;
        max-width: calc(100vw - 320px - 60px);
      }

      /deep/ .el-form-item__label {
        display: block;
        text-align: left;
        margin-top: 15px;
      }

      /deep/ .el-form-item {
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.processContainer {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  height: calc(100vh - 230px);
}
.examinationOpinion {
  height: calc(100vh - 114px);
  // padding: 30px;
  overflow: auto;
  background: #f5f6f7;

  .earlyMappingForm {
    background: #fff;
    padding: 20px;
    min-height: calc(100vh - 230px);
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
    margin-top: 60px;
    margin-bottom: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
  .basicInfo {
    span {
      display: inline-block;
      margin: 20px 60px 0 0;
      font-size: 14px;
      color: #8c8c8c;
    }
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
  .area {
    padding: 0 0 15px 0;
  }
}
</style>

